<template>
	<view>
		<u-navbar :border-bottom='false' title="选择出行人"></u-navbar>
		<view class="btns">
			<view class="btn-li" @click="navTo('./ediTraveller')">
				扫描证件
			</view>
			<view class="btn-li" @click="navTo('./ediTraveller')">
				手动添加
			</view>
		</view>
		<view class="tips">
			<text style="color: #E5793B;">小贴士：</text>为了您顺利出行，请保证填写项已所持证件一致
		</view>

		<!-- 成人 -->
		<view class="linkman" v-if="adultNum>=1">
			<u-checkbox-group @change="groupChangePeo" :wrap='true' shape='circle' size='40' :max='adultNum'>
				<u-checkbox width="100%" v-model="item.checked" v-for="(item,index) in peopleList" :key='index'
					:name="item.id">
					<view class="infoBox">
						<view class="linkman-info">
							<view class="name">
								{{item.id_name}}
							</view>
							<view class="num">
								身份证号 {{item.id_number}}
							</view>
						</view>
						<view class="edit" @click="navTo('./ediTraveller?name='+item.id_name+'&num='+item.id_number)">
							<u-icon name="edit-pen" color="#3587F7" size="36"></u-icon>
						</view>
					</view>
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<!-- 儿童 -->
		<view class="linkman" v-if="childNum>0">
			<u-checkbox-group @change="groupChangecld" :wrap='true' shape='circle' size='40' :max='childNum'>
				<u-checkbox width="100%" v-model="item.checked" v-for="(item,index) in childList" :key='index'
					:name="item.id">
					<view class="infoBox">
						<view class="linkman-info">
							<view class="name">
								{{item.id_name}}
							</view>
							<view class="num">
								身份证号 {{item.id_number}}
							</view>
						</view>
						<view class="edit" @click="navTo('./ediTraveller?name='+item.id_name+'&num='+item.id_number)">
							<u-icon name="edit-pen" color="#3587F7" size="36"></u-icon>
						</view>
					</view>
				</u-checkbox>
			</u-checkbox-group>
		</view>

		<!-- 	<view class="noCont" v-else>
			<u-empty text="暂无出行人" mode="list"></u-empty>
		</view> -->
	</view>
</template>

<script>
	import myRequest from '../../../../api/index.js'
	export default {
		data() {
			return {
				backTextStyle: {
					'color': '#3587F7',
					'font-size': '32rpx'
				},
				page: '1',
				peopleList: [],
				adultNum: '', //已选择成人数
				childNum: '',
				isChild: false,
				childList:[]
			}
		},
		onLoad(option) {
			this.childNum = option.childNum
			this.adultNum = option.adultNum
		},
		onShow() {
			// if (this.$store.state.tripMan.length) {
			// 	this.peopleList = this.$store.state.tripMan
			// } else {
			// 	this.getTripeople()
			// }
			this.page='1'
			this.peopleList = []
      this.getTripeople()
		},
		onReachBottom() {
			let page = Number(this.page) + 1
			this.page = page.toString()
			this.getTripeople()
		},
		methods: {
			groupChangePeo(list) {
				list.forEach(item => {
					this.peopleList.forEach(peo => {
						if (peo.id == item) {
							peo.checked = true
						}
					})
				})
				this.$store.commit('changeTripman', this.peopleList)
			},
			groupChangecld(data){
				data.forEach(item => {
					this.childList.forEach(cld => {
						if (cld.id == item) {
							cld.checked = true
						}
					})
				})
				this.$store.commit('changeChild', this.childList)
			},
			// 获取出行人
			async getTripeople() {
				let that = this
				let {
					page
				} = this
				let res = await myRequest.getTripman({
					page: page,
				})
				if (res.status) {
					res.data.forEach(item => {
						item.checked = false
					})
					
					this.peopleList = [...this.peopleList, ...res.data]
					this.peopleList.forEach(child=>{
						if(child.age<18) {
							that.childList.push(child)
						}
					})
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		padding: 28rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn-li {
			width: 336rpx;
			height: 76rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			line-height: 76rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #3587F7;
		}
	}

	.tips {
		width: 100%;
		height: 80rpx;
		background: #FEF7EF;
		line-height: 80rpx;
		font-size: 24rpx;
		font-family: Segoe UI;
		font-weight: 400;
		padding-left: 28rpx;
	}

	.linkman {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		padding: 0 28rpx;

		.infoBox {
			width: 100%;
			display: flex;
			align-items: center;

			.linkman-info {
				.name {
					font-size: 32rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
				}

				.num {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #999999;
				}
			}

			.edit {
				margin-left: auto;
			}
		}

	}

	.noCont {
		padding-top: 320rpx;
	}

	/deep/ .u-checkbox__label {
		width: 100%;
		margin-left: 20rpx;
		border-bottom: 2rpx solid #F2F2F7;
	}

	/deep/ .u-checkbox {
		line-height: 1.9;
	}

	/deep/ .u-checkbox-group {
		width: 100%;
	}
</style>
